<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/form.css">
</head>
<body>
  <h1>
    个人中心
    <p class="active"><a href="./rpwd.html">修改密码</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="./index.html">回到首页</a></p>
  </h1>

  <form>
    <label>
      用户名: <input class="name" type="text" disabled>
    </label>
    <label>
      昵称: <input class="nick" type="text">
    </label>
    <label>
      年龄: <input class="age" type="text">
    </label>
    <label>
      性别: <select class="gender">
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </label>
    <button>确认修改</button>
  </form>
  <script type="module">
    // 获取元素  拿到数据后 更新到里边  
    const formele = document.querySelector('form');
    const usernameInp = document.querySelector('.name');
    const nicknameInp = document.querySelector('.nick');
    const ageInp = document.querySelector('.age');
    const genderInp = document.querySelector('.gender');



     import myaxios from '../utils/http.js'

     // 获取用户的信息 需要用户先登录  
     // id 和token 保存到了 本地存储中 
     // 个人中心页面 就到 本地存储 拿到id 和token 
    const user_id = window.localStorage.getItem('user_id');
    const token = window.localStorage.getItem('token');
    //请求数据 渲染到页面上 
    get_info()
    async function get_info(){
      const res = await myaxios.get('/users/info?id='+user_id,{
      headers:{
        authorization:token
      }
    })

      console.log(res.info);
      const {username,nickname,age,gender} = res.info;

      console.log(username,nickname,age,gender)
      usernameInp.value = username;
      nicknameInp.value = nickname;
      ageInp.value = age;
      genderInp.value = gender;

     
    }
  

    // 获取用户新的数据 提交到服务器 保存到数据库  
    formele.addEventListener('submit',async e=>{
        e.preventDefault();

        //采集用户提交信息  
        const data = {
            id:user_id,
            age:ageInp.value,
            gender:genderInp.value,
            nickname:nicknameInp.value
        }

        const res = await myaxios.post('/users/update',data,{
          headers:{
            authorization:token
          }
        })
      
        if(res.code === 1){
            alert('修改成功')
        }


      });
  </script>
</body>
</html>